<template>
<div>
  <van-nav-bar
    left-arrow
  />
  <h3 class="box-l">短信登录
  </h3>
    <van-cell-group >
      <van-field
        v-model="mobile"
        required
        type="tel"
        label="手机号"
        name="mobile"
   :rules="[{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]"
        placeholder="请输入手机号"
      />
      <van-field
    v-model="code"
    center
    clearable
    name="code"
    label="短信验证码"
    placeholder="请输入短信验证码"
  >
    <template #button>
      <van-button size="small" @click="getTelePhone">发送验证码</van-button>
    </template>
  </van-field>
   <div style="margin: 16px;">
      <van-button @click="onSubmit({mobile:mobile,code:code})" round block type="info" native-type="submit" style="background-color:#07c160;border: 1px solid #07c160;">提交</van-button>
    </div>
    </van-cell-group>
</div>
</template>

<script>
import { getPhone } from '@/api/article'
import { login } from '@/api/user'
import { setToken } from '@/utils/storage'
export default {
  name: 'LoginPage',
  data () {
    return {
      mobile: '',
      code: ''
    }
  },
  methods: {
    async getTelePhone () {
      const res = await getPhone(this.mobile)
      console.log(res)
    },
    async onSubmit (data) {
      const res = await login(data)
      console.log(res)
      setToken(res.data.token)
      this.$router.push('/')
    }
  }

}
</script>

<style>
.box-l{
font-size: 24px;
padding: 25px;
font-weight: normal;
}
</style>
